<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城首页</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/products.js"></script>
    <script src="js/script.js"></script>

</head>
<body>
    <header>
        <!-- 导航栏 -->
        <nav>
            <a href="category.html">首页</a>
            <a href="index.html">分类</a>   
               <!-- category 才是分类 index.html才是首页 -->
            <a href="cart.html">购物车</a>
            <a href="profile.html">我的</a>
            &nbsp
            <button><a href="login.html">登录</a></button>
        </nav>
    </header>
    <!-- 一级 二级菜单 -->
    <div class="menu-container">
        <ul class="main-menu">
            <li>
                <a href="#">热卖</a>
            </li>
            <li>
                <a href="#">食品</a>
                <ul class="sub-menu">
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
            </li>
            <li>
                <a href="#">家居</a>
                <ul class="sub-menu">
                    <li><a href="#">家具</a></li>
                    <li><a href="#">家纺</a></li>
                </ul>
            </li>
            <!-- 新增8组分类 -->
            <li>
                <a href="#">电子产品</a>
                <ul class="sub-menu">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">智能设备</a></li>
                    <li><a href="#">电脑</a></li>
                </ul>
                <ul class="sub-menu">
                    <li><a href="#">手机</a></li>
                    <li><a href="#">电脑</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">智能设备</a></li>
                </ul>
            </li>
            <li>
                <a href="#">服装</a>
                <ul class="sub-menu">
                    <li><a href="#">男装</a></li>
                    <li><a href="#">女装</a></li>
                    <li><a href="#">童装</a></li>
                    <li><a href="#">运动服</a></li>
                </ul>
            </li>
            <li>
                <a href="#">图书</a>
                <ul class="sub-menu">
                    <li><a href="#">计算机</a></li>
                    <li><a href="#">科技</a></li>
                    <li><a href="#">教育</a></li>
                    <li><a href="#">儿童读物</a></li>
                </ul>
            </li>
            <li>
                <a href="#">美妆</a>
                <ul class="sub-menu">
                    <li><a href="#">护肤品</a></li>
                    <li><a href="#">彩妆</a></li>
                    <li><a href="#">个护工具</a></li>
                    <li><a href="#">香水</a></li>
                </ul>
            </li>
            <li>
                <a href="#">运动户外</a>
                <ul class="sub-menu">
                    <li><a href="#">健身器材</a></li>
                    <li><a href="#">露营装备</a></li>
                    <li><a href="#">运动鞋服</a></li>
                    <li><a href="#">骑行装备</a></li>
                </ul>
            </li>
            <li>
                <a href="#">家电</a>
                <ul class="sub-menu">
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">个护电器</a></li>
                    <li><a href="#">大家电</a></li>
                </ul>
            </li>
            <li>
                <a href="#">数码配件</a>
                <ul class="sub-menu">
                    <li><a href="#">手机配件</a></li>
                    <li><a href="#">电脑配件</a></li>
                    <li><a href="#">智能穿戴</a></li>
                    <li><a href="#">摄影器材</a></li>
                </ul>
            </li>
            <li>
                <a href="#">家装建材</a>
                <ul class="sub-menu">
                    <li><a href="#">灯具</a></li>
                    <li><a href="#">五金工具</a></li>
                    <li><a href="#">装饰材料</a></li>
                    <li><a href="#">厨卫设施</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- 商品展示区 --> 
    <div class="centered-div"><h2>商品信息</h2></div>
    <div class="product-container">
        <div class="product-list" id="product-display"></div>
    </div>
</body>
</html>